<template>
  <div>
    <div class="mb_10">
      <i class="el-icon-arrow-left commhover" @click="back"></i>
      <span class="textunder ccolor commhover f-13" @click="back"
        >活动名称（点击返回上一级）</span
      >
      <span class="ccolor f-13"> / 用户核销</span>
    </div>
    <div class="bg_fff full-w p_20 listbody">
      <div class="flexcolumn aligncenter">
        <div class="mt64 mb64 f-18 c_000">请输入兑奖码进行核销</div>
        <el-input
          placeholder="请输入兑奖码"
          v-model="queryParams.code"
          clearable
          style="width: 520px"
          @clear="clear"
        ></el-input>
        <div class="hexbox" v-if="issearch">
          <div class="f-16 c_000 mb_16">活动信息</div>
          <div class="flex mb_32">
            <div class="imgbox">
              <img :src="domain+draw.photo" alt="" />
              <div class="boxstatus f-13" v-if="draw.task.status == 1">进行中</div>
              <div class="boxstatus f-13" v-if="draw.task.status == 0">未开始</div>
              <div class="boxstatus f-13" v-if="draw.task.status == 4">已结束</div>
            </div>
            <div class="flexcolumn titlebox">
              <div class="f-16 c_000 title">{{ draw.task.name }}</div>
              <div class="c_838383 f-14">
                {{ draw.draw.startime }}至{{ draw.draw.endtime }}
              </div>
            </div>
          </div>
          <div class="mb_16 c_838383">获得奖项</div>
          <div class="c_838383">
            {{ draw.draw.level_name }}：{{ draw.draw.draw_name }}
          </div>
        </div>
        <el-button type="primary" v-if="!issearch" class="mt64" @click="search">确 认</el-button>
        <el-button type="primary" v-else class="mt64" @click="hexiao">核 销</el-button>
      </div>
    </div>
    <el-dialog
      title="填写地址"
      :visible.sync="hexopen"
      width="900px"
      class="dialogheaderbg"
      :before-close="handleClosehx"
    >
      <hexiao-comp v-if="hexopen" :row="draw" @close="handleClosehx" :type='2'/>
    </el-dialog>
  </div>
</template>

<script>
import { destroyCode, drawInfo } from "@/api/hexiao";
import HexiaoComp from "../winlist/components/HexiaoComp.vue";
// import * as echarts from "echarts";
// require("echarts/theme/macarons"); // echarts theme
export default {
  data() {
    return {
      issearch: false,
      queryParams: {
        task_id: "",
        code: "",
      },
      draw: {},
      hexopen:false
    };
  },
  components:{
    HexiaoComp
  },
  mounted() {},
  created() {
    let task_id = this.$route.query.id;
    if (task_id) {
      this.queryParams.task_id = task_id;
    }
  },
  methods: {
    search() {
      if (!this.queryParams.code) {
        this.$message.warning("请输入兑奖码");
        return;
      }
      drawInfo({ code: this.queryParams.code }).then((res) => {
        this.draw = res.data;
        this.issearch = true;
      });
    },

    hexiao() {
      if(this.draw.is_cash==1 && !this.draw.more){
        this.hexopen = true
      }else{
        destroyCode(this.queryParams).then(() => {
          this.$message.success('成功')
        });
      }
    },

    handleClosehx(type){
      if(type==1){
        this.search()
      }
      this.hexopen = false
    },

    back() {
      this.$router.back();
    },

    clear() {
      this.issearch = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.listbody {
  height: calc(100vh - 118px);
  overflow-y: auto;
  padding-bottom: 25px;
}
.boxdata {
  padding: 15px 20px;
}
.full_h {
  height: 100%;
}
.mb64 {
  margin-bottom: 64px;
}
.mt64 {
  margin-top: 64px;
}
.hexbox {
  width: 800px;
  padding: 32px;
  border-radius: 8px;
  margin-top: 32px;
  background-color: #fbfbfb;
}
.imgbox {
  width: 168px;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .boxstatus {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px;
    background-color: rgba($color: #000000, $alpha: 0.3);
    color: #fff;
    border-radius: 3px;
  }
}
.titlebox {
  width: calc(100% - 168px);
  padding: 6px;
  padding-left: 15px;
  justify-content: space-between;

  .title {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden; //溢出内容隐藏
    text-overflow: ellipsis; //文本溢出部分用省略号表示
    display: -webkit-box; //特别显示模式
    -webkit-line-clamp: 2; //行数
    line-clamp: 2;
    -webkit-box-orient: vertical; //盒子中内容竖直排列
    line-height: 24px;
  }
}
</style>